import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { RankingRightWrap } from "./style";
import Title from "@/components/rankComponent/rankRight/title";
import {
  getTopListXq,
  getCommentAction,
  getNewCommentAction,
} from "../../recommend/store/actionType";
import NewComment from "@/components/aboutComment/newComment";
// import Loading from '@/components/loading'
import SongList from "@/components/rankComponent/rankRight/songList";
import Pagination from "@/components/pagination";

export default memo(function RankingRight(props) {
  const dispatch = useDispatch();
  const [pageState, setPageState] = useState(1);
  const id = props.songIdFromProps.location.search.split("=")[1];

  useEffect(() => {
    if (pageState === 1) {
      dispatch(getTopListXq(id));
      dispatch(getNewCommentAction(id, 2, 1, 15));
    }
    dispatch(getCommentAction(id, 20, (pageState - 1) * 20));
  }, [dispatch, id, pageState]);

  const { toplistxq, commentThreadInfo, newComments } = useSelector(
    (state) => ({
      toplistxq: state.getIn(["recommend", "topListXq"]),
      commentThreadInfo: state.getIn(["recommend", "getCommentInfo"]),
      newComments: state.getIn(["recommend", "getNewComments"]),
    }),
    shallowEqual
  );

  const getPage = (page) => {
    setPageState(page);
  };

  document.title = `${
    toplistxq.length !== 0 ? toplistxq.name : ""
  } - 排行榜 - 网易云音乐`;

  return (
    <RankingRightWrap>
      <div>
        <Title
          commentCount={toplistxq.length !== 0 ? toplistxq.commentCount : ""}
          shareCount={toplistxq.length !== 0 ? toplistxq.shareCount : ""}
          name={toplistxq.length !== 0 ? toplistxq.name : ""}
          imgUrl={toplistxq.length !== 0 ? toplistxq.coverImgUrl : ""}
          updateTime={toplistxq.length !== 0 ? toplistxq.updateTime : ""}
          id={id}
        />
        <SongList
          songLength={toplistxq.length == 0 ? "" : toplistxq.tracks.length}
          playCount={toplistxq.playCount}
          tracks={toplistxq.tracks}
        />
        <div className="commentDiv">
          <NewComment
            id={id}
            type={2}
            t={1}
            a={1}
            handCheck={true}
            hotComment={
              newComments.code === 200 ? newComments.data.comments : ""
            }
            comments={commentThreadInfo.code == 200 ? commentThreadInfo : ""}
            pageNum={1}
          />
          <Pagination
            page={pageState}
            size={20}
            getPage={getPage}
            total={commentThreadInfo.total}
          />
        </div>
      </div>
    </RankingRightWrap>
  );
});
